<template>
    <div class="login_wrap">
        <div class="formWrap">
            <div class="formTitle">
                <el-row justify="space-between">
                    <el-col :span="11" align="left" class="pageName">{{ pageName }}</el-col>
                    <el-col :span="11" align="right"><img src="../../assets/logo.png" class="logo" /></el-col>
                </el-row>
            </div>
            <br>

            <el-form :model="loginForm" style="max-width: 460px" ref="loginFormRef">
                <el-form-item prop="email" :rules="emailRules">
                    <el-input prefix-icon="message" size="large" v-model="loginForm.email" placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item prop="password" :rules="passwordRules">
                    <el-input prefix-icon="lock" size="large" v-model="loginForm.password" type="password"
                        placeholder="请输入密码" :show-password=true />
                </el-form-item>
                <el-row class="formHelper" justify="space-between">
                    <el-col :span="7"><el-checkbox v-model="remeberMe" label="记住我" size="large" /></el-col>
                    <el-col :span="7">
                        <p class="forgetPassword" align="right" style="cursor: pointer;"
                            @click="router.push('/resetpassword')">忘记密码?</p>
                    </el-col>
                </el-row>
                <el-button type="primary" size="large" class="login_btn" @click="handleLogin">登录</el-button>
            </el-form>
        </div>
    </div>
</template>
  
<script setup>
import router from '@/router';
import store from '@/store';
import { reactive, ref } from 'vue';
import { login } from '@/utils/request'
import { ElMessage } from 'element-plus'

const pageName = ref('管理员登录')
const remeberMe = ref(false)

// 表单校验
const emailRules = [
    {
        required: true,
        message: '请输入邮箱',
        trigger: 'blur'
    },

    {
        pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/,
        message: '请输入正确邮箱',
        trigger: 'blur'
    }
]
const passwordRules = [
    {
        required: true,
        message: '请输入密码',
        trigger: 'blur',
    },
    {
        min: 6,
        max: 30,
        message: '长度在6-30之间',
        trigger: 'blur',
    },
]
const loginForm = reactive({
    email: '',
    password: '',
    roleName: '管理员'
})
const loginFormRef = ref();
function handleLogin() {
    // 表单校验
    loginFormRef.value?.validate((res) => {
        if (res) {
            login(loginForm).then(res => {
                if (res.data.code == 200) {
                    // 响应成功
                    store.commit('setToken', res.data.data.token)
                    store.commit('setUserInfo', res.data.data)
                    localStorage.setItem("token", res.data.data.token)
                    localStorage.setItem('userInfo', JSON.stringify(res.data.data))
                    localStorage.removeItem("refresh")
                    router.push("/index")
                } else {
                    // 响应失败
                    ElMessage.error(res.data.message || '服务器出错')
                }
            })
        } else {
            ElMessage.error("请正确填写信息");
        }
    });
}
</script>
<style>
body,
html {
    padding: 0;
    margin: 0;
}

.pageName {
    font-size: 30px;
}

.logo {
    width: 40px;
}

.login_wrap {
    width: 100%;
    height: 100vh;
    background-color: rgb(13, 136, 207);
    display: inline-flex;
}

.loginUser {
    background-color: #f4f4f5;
    padding: 5px;
}

.loginUserBtn {
    font-size: 20px;
}


.formWrap {
    padding: 40px;
    background-color: white;
    border-radius: 20px;
    margin: auto;
    width: 350px;
}


.forgetPassword {
    margin: 0;
    line-height: 40px;
    font-size: 14px;
    color: rgb(11, 114, 231);
}

.login_btn {
    display: block;
    margin: 5px auto;
    width: 100%;
}

.register_btn {
    display: block;
    margin: 5px auto;
    width: 100%;
}
</style>
  